<script lang="ts">
  import NavBar from "./components/NavBar.svelte";
  import Todo from "./pages/todo.svelte";
  import Word from "./pages/Word.svelte";
  export let name = 'NEW';

  let page = 1;
</script>

<main>
  <NavBar bind:currentMenu={page} />
  {#if page == 1}
    <h1>Hello {name}!</h1>
  {:else if page == 2}
    <Todo />
  {:else if page == 3}
    <Word />
  {/if}
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>
